import { Button, Image, Input, Popup } from '@nutui/nutui-react';
import { PopupProps } from '@nutui/nutui-react/dist/types/packages/popup';
import { useEffect, useMemo, useState } from 'react';

import { apiM1SpreadM2AssistByPost } from '@/application/apis/m1Spread';
import { VERIFY_DICT } from '@/application/utils/check';
import { render } from '@/application/utils/render';

interface Props extends Partial<PopupProps> {
  onConfirm: () => void;
  spreadKey: string;
}
export const PhoneDialog = ({ visible, onClose, onConfirm, spreadKey }: Props) => {
  const [tel, setTel] = useState('');
  const btnStatus = useMemo(() => {
    return !VERIFY_DICT['phone'](tel);
  }, [tel]);
  const handleSubmit = async () => {
    try {
      await apiM1SpreadM2AssistByPost({ m2Mobile: tel, spreadKey });
      onConfirm();
    } catch (e) {
      console.log(e);
    }
  };
  return (
    <Popup
      lockScroll
      visible={visible}
      onClose={onClose}
      style={{
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: '2007',
        background: 'transparent'
      }}
    >
      <div>
        <div className="relative mx-auto w-73.75 rounded-lg bg-white px-7.5 py-3.75">
          <div className="text-center text-[18px] font-semibold">助力</div>
          <Input
            className="mt-5 !h-10 rounded-lg !border !px-2.5 !text-[15px] !leading-none"
            value={tel}
            type="tel"
            onChange={setTel}
            placeholder="请输入手机号"
            maxLength={11}
            clearable
          />
          <div className="mt-3.75 text-left text-[12px]">
            <span className="text-[#FF4800]">请务必提供准确的手机号码，</span>
          </div>
          <Button
            disabled={btnStatus}
            className="!mt-6.25 flex h-10 w-full items-center justify-center !rounded-full !border-none !bg-gradient-to-r from-[#FF4800] to-[#FDAA36] text-[17px] !text-white"
            onClick={handleSubmit}
          >
            确认助力
          </Button>
        </div>
        <Image
          onClick={onClose}
          src={new URL('/images/home/close_icon.png', import.meta.env.VITE_IMG_BASE_URL).href}
          className="mx-auto mt-7.5 h-8.75 w-8.75"
        />
      </div>
    </Popup>
  );
};

PhoneDialog.show = (props: any) => {
  console.log('props', props);
  const body = document.body;

  const container = document.createElement('div');
  body.appendChild(container);

  let destroy: VoidFunction = () => undefined;
  const Temp = () => {
    const [visible, setVisible] = useState(false);

    useEffect(() => {
      setVisible(true);
    }, []);

    destroy = () => {
      setVisible(false);
    };
    return (
      <PhoneDialog
        {...props}
        onClose={() => {
          setVisible(false);
        }}
        visible={visible}
        onConfirm={() => {
          setVisible(false);
          props.onConfirm();
        }}
      />
    );
  };
  render(<Temp />, container);

  return destroy;
};
